<template>
  <view class="cases-container">
    <!-- 头部搜索栏 -->
    <view class="header">
      <view class="title">我的案件</view>
      <view class="notification-icon" @click="showNotifications">🔔</view>
    </view>
    
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input placeholder="搜索案件关键词、客户姓名" v-model="searchKeyword" @input="onSearch" />
      </view>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <view 
        class="tab" 
        :class="{ active: activeTab === 'all' }"
        @click="switchTab('all')"
      >
        全部案件
      </view>
      <view 
        class="tab" 
        :class="{ active: activeTab === 'civil' }"
        @click="switchTab('civil')"
      >
        民事案件
      </view>
      <view 
        class="tab" 
        :class="{ active: activeTab === 'criminal' }"
        @click="switchTab('criminal')"
      >
        刑事案件
      </view>
      <view 
        class="tab" 
        :class="{ active: activeTab === 'admin' }"
        @click="switchTab('admin')"
      >
        行政案件
      </view>
    </view>

    <!-- 案件统计 -->
    <view class="case-count">
      <text>共找到{{ filteredCases.length }}个案件</text>
    </view>

    <!-- 案件列表 -->
    <scroll-view class="cases-list" scroll-y @scrolltolower="loadMore">
      <view 
        class="case-card" 
        v-for="caseItem in filteredCases" 
        :key="caseItem.id"
        @click="goToDetail(caseItem.id)"
      >
        <view class="case-header">
          <view class="case-tag" :class="'tag-' + caseItem.type">
            {{ getTypeText(caseItem.type) }}
          </view>
          <view class="case-date">{{ caseItem.date }}</view>
        </view>
        
        <view class="case-title">{{ caseItem.title }}</view>
        
        <view class="case-info">
          <view class="info-item">客户: {{ caseItem.client }}</view>
          <view class="info-item">电话: {{ caseItem.phone }}</view>
        </view>
        
        <view class="case-actions">
          <view class="view-detail">查看详情 ></view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="loading">
        <text>加载更多</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>	
import { getCurrentUser } from '../../src/services/userService.js'
import { getCasesByUser } from '../../src/services/caseService.js'

export default {
  data() {
    return {
      activeTab: 'all',
      searchKeyword: '',
      cases: [],
      filteredCases: [],
      loading: false
    }
  },
  onLoad() {
    this.loadCases()
  },
  onShow() {
    this.loadCases()
  },
  onPullDownRefresh() {
    this.loadCases()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  methods: {
    loadCases() {
      const user = getCurrentUser()
      if (user) {
        this.cases = getCasesByUser(user.id)
        this.filterCases()
      }
    },
    switchTab(tab) {
      this.activeTab = tab
      this.filterCases()
    },
    onSearch() {
      this.filterCases()
    },
    filterCases() {
      let filtered = [...this.cases]
      
      // 按类型筛选
      if (this.activeTab !== 'all') {
        filtered = filtered.filter(item => item.type === this.activeTab)
      }
      
      // 按关键词搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        filtered = filtered.filter(item => 
          item.title.toLowerCase().includes(keyword) ||
          item.client.toLowerCase().includes(keyword)
        )
      }
      
      this.filteredCases = filtered
    },
    getTagClass(type) {
      return `tag-${type}`
    },
    getTypeText(type) {
      const typeMap = {
        civil: '民事案件',
        criminal: '刑事案件',
        admin: '行政案件'
      }
      return typeMap[type] || '其他案件'
    },
    goToDetail(caseId) {
      uni.navigateTo({ url: `/pages/cases/detail?id=${caseId}` })
    },
    showNotifications() {
      uni.showToast({ title: '暂无新消息', icon: 'none' })
    },
    loadMore() {
      if (this.loading) return
      this.loading = true
      // 模拟加载更多数据
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
}
</script>

<style>
.cases-container {
  min-height: 100vh;
  background: #f7f8fa;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #fff;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
}

.notification-icon {
  font-size: 32rpx;
  color: #6b7280;
}

.search-bar {
  padding: 0 24rpx 24rpx;
  background: #fff;
}

.search-input {
  display: flex;
  align-items: center;
  background: #f9fafb;
  border-radius: 24rpx;
  padding: 0 20rpx;
  height: 72rpx;
}

.search-icon {
  font-size: 28rpx;
  color: #9ca3af;
  margin-right: 16rpx;
}

.search-input input {
  flex: 1;
  font-size: 28rpx;
  color: #1f2937;
}

.filter-tabs {
  display: flex;
  padding: 24rpx;
  background: #fff;
  gap: 16rpx;
}

.tab {
  padding: 12rpx 24rpx;
  background: #f9fafb;
  border-radius: 20rpx;
  font-size: 26rpx;
  color: #6b7280;
  text-align: center;
}

.tab.active {
  background: #3b82f6;
  color: #fff;
}

.case-count {
  padding: 0 24rpx 16rpx;
  font-size: 26rpx;
  color: #6b7280;
}

.cases-list {
  height: calc(100vh - 300rpx);
  padding: 0 24rpx;
}

.case-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.case-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.case-tag {
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.tag-civil {
  background: #dbeafe;
  color: #1d4ed8;
  border: 2rpx solid #3b82f6;
}

.tag-criminal {
  background: #f3e8ff;
  color: #7c3aed;
  border: 2rpx solid #8b5cf6;
}

.tag-admin {
  background: #dcfce7;
  color: #16a34a;
  border: 2rpx solid #22c55e;
}

.case-date {
  font-size: 24rpx;
  color: #9ca3af;
}

.case-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.case-info {
  margin-bottom: 16rpx;
}

.info-item {
  font-size: 26rpx;
  color: #6b7280;
  margin-bottom: 8rpx;
}

.case-actions {
  display: flex;
  justify-content: flex-end;
}

.view-detail {
  color: #3b82f6;
  font-size: 26rpx;
}

.load-more {
  text-align: center;
  padding: 40rpx;
  color: #9ca3af;
  font-size: 26rpx;
}
</style>